<template>
  <div>
    <nav>
      <div class="nav_title">Userprofile</div>
      <div class="right_search">
        <div>
          <input type="text" placeholder="search..." />
        </div>
        <a href="javascript:;">
          <span class="iconfont icon-fanggepailie"></span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-Pathx"></span>
        </a>
        <a href="javascript:;">
          <span class="iconfont icon-user"></span>
        </a>
      </div>
    </nav>
    <div class="tubiao">
      <div class="tu-card">
        <div class="tu-card-bg">
          <div class="tu-card-top">
            <div class="tu-car-bont">
              <h4>Employee Stats</h4>
              <p>New employees on 15th September, 2016</p>
            </div>
          </div>
          <div class="tu-card-text">
            <div class="text-last">
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
            </div>
            <div class="text-last">
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
            </div>
            <div class="text-last">
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
            </div>
            <div class="text-last">
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
              <div class="text-last-ag">
                <div class="text-dash">Company (disabled)</div>
              </div>
            </div>
            <div class="text-text">
              <textarea rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
            </div>
            <div class="ti-jiao">
              <button>Update Profile</button>
            </div>
          </div>
        </div>
      </div>

      <div class="tu-card tu-right">
        <div class="tu-card-bg">
          <div class="tu-card-top">
            <div class="tu-car-bont">
              <img
                src="https://demos.creative-tim.com/vue-material-dashboard/img/marc.aba54d65.jpg"
                alt
              />
            </div>
          </div>
          <div class="tu-card-text">
            <div class="tu-card-text">
              <h6>CEO / CO-FOUNDER</h6>
              <h4>Alec Thompson</h4>
              <p>Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...</p>
              <button>Follow</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Navfooter />
  </div>
</template>
<script>
import Navfooter from "@/components/Navfooter";
export default {
  name: "Userprofile",
  components: {
    Navfooter
  }
};
</script>
<style scoped lang='less'>
nav {
  margin-bottom: 10px;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  .nav_title {
    font-size: 18px;
  }
  .right_search {
    display: flex;
    input {
      padding: 8px 0;
      outline: none;
      border: 0;
      background-color: transparent;
      border-bottom: 1px solid #000000;
    }
    a {
      display: block;
      padding: 10px 15px;
      span {
        color: #495057;
        font-size: 20px;
      }
    }
  }
}
.tubiao {
  display: flex;
  margin-top: 100px;
  .tu-card {
    width: 65%;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 12px;
    &.tu-right {
      width: 35%;
      .tu-card-bg {
        .tu-card-top {
          .tu-car-bont {
            background-color: transparent;
            margin: 0;
            padding: 0;
            width: 130px;
            height: 130px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 50%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .tu-card-text {
          text-align: center;
          h6 {
            color: #999;
            margin-bottom: 16px;
            font-weight: 100;
          }
          h4 {
            margin-top: 10px;
            margin-bottom: 10px;
          }
          p {
            color: #999;
            font-size: 14px;
            font-weight: 300;
            white-space: normal;
          }
          button {
            background-color: #4caf50;
            border-radius: 30px;
            margin: 10px 1px;
            padding: 12px 30px;
            font-size: 12px;
            font-weight: 400;
            height: auto;
            line-height: 1.5em;
            color: #ffffff;
            cursor: pointer;
            outline: none;
            border: 0;
          }
        }
      }
    }
    .tu-card-bg {
      border-radius: 4px;
      margin: 25px 0;
      background-color: #fff;
      .tu-card-hr {
        border-color: rgba(0, 0, 0, 0.12);
        border-top: 1px solid #eee;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 1px;
      }
      .tu-card-action {
        margin: 0 20px 0;
        padding: 10px 0 10px;
        span {
          font-size: 12px;
          font-weight: 300px;
          color: #9e9e9e;
        }
      }
    }
    .tu-card-text {
      padding: 16px;
      .text-last {
        display: flex;
        &:first-child {
          div {
            &.text-last-ag {
              &:first-child .text-dash::before {
                border-style: dashed;
              }
            }
          }
        }
        div {
          flex: 1;
          padding: 12px;
          &.text-last-ag {
            color: #aaa;
            font-size: 14px;
            font-weight: 400;
            position: relative;
            .text-dash {
              position: relative;
              &::before {
                content: "";
                bottom: -1px;
                left: 0;
                position: absolute;
                -webkit-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
                transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
                width: 100%;
                border-color: #d2d2d2;
                border-style: solid;
                border-width: thin 0 0;
              }
            }
          }
        }
      }
      .text-text {
          padding: 25px 15px;
          box-sizing: border-box;

        textarea {
          width: 100%;
          border: 0;
          outline: none;
          border-bottom: 1px solid #eeeeee;
          color: #495057;
          font-size: 14px;
        }
      }
      .ti-jiao {
        text-align: right;
        padding: 12px;
        button {
          border: 0;
          margin: 10px 1px;
          padding: 12px 30px;
          font-size: 12px;
          font-weight: 400;
          height: auto;
          line-height: 1.5em;
          color: #ffffff;
          cursor: pointer;
          border-radius: 3px;
          border-color: #5cb860;
          background-color: #4caf50;
          outline: none;
        }
      }
    }
    .tu-card-top {
      max-width: calc(100% - 32px);
      position: relative;
      margin: 0 auto;
      top: -20px;
      .tu-car-bont {
        height: 80px;
        box-sizing: border-box;
        padding: 15px;
        background: linear-gradient(60deg, #66bb6a, #43a047);
        border-radius: 6px;
        h4 {
          color: #fff;
        }
        p {
          color: rgba(255, 255, 255, 0.62);
          font-size: 14px;
        }
      }
    }
  }
}
</style>
